const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/**
* @type {import('webpack').Configuration}
 */
module.exports = {
  entry: './src/main.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../dist'),
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  externals: {
    react: 'var window.React',
    'react-dom': 'var window.ReactDOM',
    'prop-types': 'var window.PropTypes',
    '@alifd/next': 'var window.Next',
    '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
    // '@ant-design/icons': 'var window.icons',
    // '@alilc/lowcode-editor-core':
    //   'var window.AliLowCodeEngine.common.editorCabin',
    // '@alilc/lowcode-editor-skeleton':
    //   'var window.AliLowCodeEngine.common.skeletonCabin',
    // '@alilc/lowcode-designer':
    //   'var window.AliLowCodeEngine.common.designerCabin',
    // '@alilc/lowcode-engine-ext': 'var window.AliLowCodeEngineExt',
    // '@ali/lowcode-engine': 'var window.AliLowCodeEngine',
    moment: 'var window.moment',
    lodash: 'var window._',
  },
  module: {
    rules: [
      {
        test: /.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
     {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ]
  },
  plugins: [
      new HtmlWebpackPlugin({
      template: './public/index.html',
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};